<template>
    <div v-show="show" class="element" v-bind:class="{expand:clicked}">
        <div class="menu-title" v-bind:class="{selected:cRouter===route.router}" @click="MenuClick">
            <div>
                <img :src="route.icon" width="16px"/>
            </div>
            <div style="margin-left: 10px">
                {{ route.title }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MenuItem",
    props: ['route', 'cRouter', 'roles'],
    data() {
        return {
            clicked: false,
            show: false
        }
    },
    methods: {
        MenuClick() {
            this.$router.push(this.route.router)
        },

    },

    mounted() {
        console.log(this.roles)
        var user = this.$store.getters.getUser;
        console.log(user)
        var role = user.roles[0]
        let _this = this
        var find =false
        this.roles.find(function (value) {

            if (value === role) {
                find = true

                //则包含该元素
            }
        })
        this.show = find
    }
}
</script>

<style scoped>
.element {
    margin-top: 10px;
}

.menu-title {
    width: 200px;
    display: flex;
    flex-direction: row;
    height: 50px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 30px;
    font-size: 14px;
    padding-left: 20px;
    color: white;
    transition: all 500ms;
    cursor: pointer;
}

.selected {
    background-color: #247BD9;
}

.menu-title:hover {
    background-color: #4196F4;
}
</style>